<template>

    <el-menu :default-active="$route.path" background-color="#282c34" text-color="#fff" :router="true">

        <SubMenu :menusData="menusData" />

    </el-menu>

</template>

<script lang="ts" setup>
// 引入图标

import { computed } from 'vue';
import SubMenu from './SubMenu.vue';
import { useAdminStore } from '@/store/admin';

const adminStore = useAdminStore();

const menusData = computed(() => {
    return menusDataFormat(adminStore.menusData);
})

// A - B - C
const menusDataFormat = (menusData: MenuItem[]): MenuItem[] => {
    return menusData.reduce((prev: any[], item) => {
        if (item.type == 'button') {
            return prev;
        }
        // 代码执行到这一行，说明 item.type 不是 button
        if (item.children) {
            const filterChildren = menusDataFormat(item.children);
            if (filterChildren.length > 0) {
                // 代码执行到这一行，说明 item.children 是需要留下的
                return [
                    ...prev,
                    {
                        ...item,
                        children: filterChildren
                    }
                ]
            }
            // 代码执行到这一行，说明 item 原本有 children 属性
            // 但是，所有的 children 都不是菜单数据，因此不保留 children
            return [
                ...prev,
                {
                    _id: item._id,
                    title: item.title,
                    icon: item.icon,
                    path: item.path
                }
            ]
        }
        // 代码执行到这一行，说明 item 没有 children
        return [
            ...prev,
            item
        ]

    }, []);
}




</script>

<style scoped>
.el-menu {
    /* --el-menu-bg-color: #282c34;
    --el-menu-text-color: #fff; */
    --el-menu-item-height: 50px;
    border-right: none;
}

/* 设置选中的菜单项的样式 */
.el-menu-item.is-active {
    color: #fff;
    background-color: #0256ff;
}
</style>